import { NavLink, useNavigation } from "react-router"
import { useParams } from "react-router"
import { useSubmit,useActionData } from "react-router"
import { useLoaderData } from "react-router"
import { Form, Input, Button } from "antd"

export default function Home() {
  const submit = useSubmit()
  const navigation = useNavigation()
  // 获取params传参
  const params = useParams()
  console.log('params',params)

  const {data, success} = useLoaderData()
  console.log('data',data);
  console.log('success',success);

  const onFinish = (values: any) => {
    console.log(values);
    submit(values, {
      method: 'post'
    })
  }

  return (
    <div>
      <h1>Home</h1>
      {
        data.map((item: any) => (
          <div key={item.name}>
            <div>name:{item.name}</div>
            <div>age:{item.age}</div>
          </div>
        ))
      }
      <Form onFinish={onFinish}> 
        <Form.Item name="name" label="名字">
          <Input placeholder="请输入name" />
        </Form.Item>
        <Form.Item name="age" label="年龄">
          <Input placeholder="请输入age" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
      <NavLink style={({isActive, isPending, isTransitioning}) => ({
        color: isActive ? 'red' : 'blue'
      })} to="/about?name=kp&age=18" state={{name:'我是name',age:20}}>About</NavLink>
    </div>
  )
} 